<template>
	<view class="tab_head">
		 <text
      @click="barTap(index)"
      v-for="(headItem, index) in headItems"
      :key="index"
      :class="['tab_head-item', activeIndex == index ? 'active' : '']"
    >{{ headItem.label }}</text>
	</view>
</template>

<script>
	
	export default {
		
		props:{
            activeIndex:{
		        type:Number,
				default:0
			},
			headItems:{
				type:Array,
				default:function(){
					return [
					]
				}
			}
		},
	    data() {
	        return {}
	    },
	    watch: {},
	    methods: {
            barTap(activeIndex){
                this.$emit('barTap',activeIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c_blue {
		color: #377cfd;
	}
	.tab_head {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content:center;
		font-size: 30upx;
		color: #333;
		padding: 4upx 0;
		box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.15);
		&-item {
			line-height: 50upx;
			margin-left: 20upx;

			&.active {
				color: #377cfd;
				border-bottom: 4upx solid #377cfd;
			}

			&:first-child {
				margin-left: 0;

			}
		}
	}
</style>
